<template>
  <el-dialog
    :title="formData.id ? '编辑门店' : '新增门店'"
    :visible="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    center
  >
    <el-form
      ref="addEditForm"
      v-loading="isLoading > 0"
      :model="formData"
      :rules="rules"
      label-width="130px"
      class="add-edit-form"
    >
      <el-form-item label="门店名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="所属城市" prop="city_id">
        <el-select v-model="formData.city_id" placeholder="选择城市">
          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="formData.address" />
      </el-form-item>

      <el-form-item label="经度" prop="longitude">
        <el-input v-model="formData.longitude" />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="formData.latitude" />
      </el-form-item>

      <el-form-item label="店长" prop="owner_id">
        <el-select v-model="formData.owner_id" placeholder="选择店长">
          <el-option
            v-for="item in employeeList"
            :key="item.id"
            :label="item.true_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="联系电话" prop="contact_mobile">
        <el-input v-model="formData.contact_mobile" />
      </el-form-item>

      <el-form-item label="配送范围" prop="delivery_scope">
        <el-input v-model="formData.delivery_scope" />
      </el-form-item>

      <el-form-item label="开店日期" prop="open_date">
        <el-date-picker v-model="formData.open_date" type="date" placeholder="选择日期" />
      </el-form-item>

      <el-form-item label="营业时间(open)" prop="open_time">
        <el-time-select
          v-model="formData.open_time"
          placeholder="起始时间"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '24:00'
          }"
        />
      </el-form-item>

      <el-form-item label="营业时间(close)" prop="close_time">
        <el-time-select
          v-model="formData.close_time"
          placeholder="结束时间"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '24:00'
          }"
        />
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input v-model="formData.sort" placeholder="请填入一个整数，数字越小越靠前" />
      </el-form-item>

      <el-form-item label="是否上线">
        <el-switch
          :value="formData.status === 1"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="formData.status = formData.status === 1 ? -1 : 1"
        />
      </el-form-item>

      <el-form-item class="submit-box">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
const emptyFormData = {
  name: '北京奥林匹克店',
  city_id: '',
  address: '北京奥林匹克店情人文如其人玩',
  longitude: '116.39876',
  latitude: '40.00793',
  owner_id: '',
  contact_mobile: '134534532',
  delivery_scope: '23',
  open_date: '',
  open_time: '',
  close_time: '',
  // name: '',
  // city_id: '',
  // address: '',
  // longitude: '',
  // latitude: '',
  // owner_id: '',
  // contact_mobile: '',
  // delivery_scope: '',
  // open_date: '',
  // open_time: '',
  // close_time: '',
  sort: 1,
  status: -1
}
let formData
import lodash from 'lodash'
import { addOneShop, updateOneShop } from '@/api/shop'
import dayjs from 'dayjs'
export default {
  name: 'ShopAddEdit',
  components: {},
  props: {
    cityList: {
      type: Array,
      default: () => []
    },
    employeeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      isLoading: 0,
      formData: {},
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        city_id: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        owner_id: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        longitude: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] },
          { pattern: /^[1-9]\d*\.?\d*$/, message: '必须是一个数字', trigger: ['change', 'blur'] }
        ],
        latitude: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] },
          { pattern: /^[1-9]\d*\.?\d*$/, message: '必须是一个数字', trigger: ['change', 'blur'] }
        ],
        address: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        contact_mobile: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        delivery_scope: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] },
          { pattern: /^[1-9]\d*\.?\d*$/, message: '必须是一个数字', trigger: ['change', 'blur'] }
        ],
        open_date: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        open_time: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        close_time: [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    open(row) {
      this.dialogVisible = true
      if (row) {
        formData = lodash.cloneDeep(row)
      } else {
        formData = lodash.cloneDeep(emptyFormData)
      }
      this.resetForm()
    },
    resetForm() {
      this.formData = lodash.cloneDeep(formData)
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate()
      })
    },
    submitForm() {
      if (this.isLoading > 0) return
      this.$refs.addEditForm.validate(async vaild => {
        if (!vaild) return
        try {
          this.isLoading++
          this.formData.open_date = dayjs(this.formData.open_date)

          if (this.formData.id) {
            await updateOneShop(this.formData)
          } else {
            await addOneShop(this.formData)
          }
          this.$emit('refresh')
          this.handleClose()
        } finally {
          this.isLoading--
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.submit-box {
  display: flex;
  justify-content: flex-end;
}
</style>
